HTMLify

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>BB Resistance & Insulation Resistance Training Quiz</title>
<style>
:root{--blue:#0033cc;--navy:#05054e;--cyan:#1edbf9;--pale:#e7f9fc;--grey:#76768b;--light:#f4f5f8;--green:#16834b;--red:#c62828}
*{box-sizing:border-box} body{margin:0;font-family:"Titillium Web",Arial,sans-serif;color:var(--navy);background:var(--light);line-height:1.35}
.gradient{height:6px;background:linear-gradient(90deg,var(--blue),#0094ff,var(--cyan))}.shell{max-width:980px;margin:28px auto;background:white;box-shadow:0 12px 35px #05054e22}.top{padding:24px 34px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:32px;color:var(--blue);font-weight:700;letter-spacing:-1px}.brand small{display:block;color:#8b8d8e;font-size:12px;text-align:right;margin-top:-7px}.tag{font-size:13px;color:var(--grey)}
main{padding:8px 34px 40px}.intro{background:var(--pale);padding:22px;border-left:5px solid var(--blue);margin-bottom:24px}.intro h1{font-size:30px;color:var(--blue);margin:0 0 8px;font-weight:500}.candidate{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.candidate label{font-weight:600}.candidate input{width:100%;padding:11px;border:1px solid #a0a5bb;border-radius:3px;font:inherit;margin-top:5px}.progress-wrap{position:sticky;top:0;background:white;padding:12px 0;z-index:5}.progress{height:8px;background:#d4d7e3;border-radius:9px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:.25s}.progress-text{text-align:right;font-size:13px;color:var(--grey);margin-top:4px}
.question{border:1px solid #d4d7e3;margin:15px 0;padding:20px;border-radius:4px;break-inside:avoid}.question h2{font-size:18px;color:var(--blue);margin:0 0 13px;font-weight:600}.option{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;margin:6px 0;border-radius:4px;cursor:pointer}.option:hover{background:var(--pale)}.option input{margin-top:4px;accent-color:var(--blue)}
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.btn{border:0;padding:12px 20px;font:600 16px inherit;border-radius:3px;cursor:pointer}.primary{background:var(--blue);color:white}.secondary{background:white;color:var(--blue);border:1px solid var(--blue)}.btn:disabled{opacity:.45;cursor:not-allowed}.notice{display:none;margin-top:14px;background:#fff3cd;color:#624b00;padding:12px;border-left:4px solid #f0ad00}.results{display:none;padding:28px 34px 40px}.scorecard{text-align:center;padding:30px;background:var(--pale);border-top:6px solid var(--blue)}.score{font-size:52px;color:var(--blue);font-weight:700}.status{font-size:28px;font-weight:700}.pass{color:var(--green)}.fail{color:var(--red)}
.print-pages{display:none}.print-page{position:relative;width:210mm;height:297mm;padding:22mm 16.5mm 18mm;background:white;page-break-after:always;overflow:hidden}.print-page:last-child{page-break-after:auto}.print-logo{position:absolute;right:9mm;top:9.5mm;width:45mm;text-align:right;color:var(--blue);font-size:22pt;font-weight:700}.print-logo small{display:block;color:#8b8d8e;font-size:8pt;margin-top:-4px}.print-line{position:absolute;left:0;right:0;bottom:0;height:6mm;background:linear-gradient(90deg,var(--blue),#0094ff,var(--cyan))}.cert{text-align:center;padding-top:34mm}.cert .eyebrow{color:var(--blue);letter-spacing:2px;text-transform:uppercase;font-size:11pt}.cert h1{color:var(--blue);font-size:30pt;font-weight:400;margin:8mm 0 4mm}.cert h2{font-size:24pt;margin:7mm 0;color:var(--navy)}.cert .course{font-size:16pt;margin:8mm auto;max-width:150mm}.cert .result-box{display:inline-block;margin-top:8mm;padding:5mm 15mm;background:var(--pale);border-top:2mm solid var(--blue);font-size:14pt}.cert .sign{display:flex;justify-content:space-between;margin-top:26mm;text-align:left;font-size:10pt}.sign div{width:65mm;border-top:1px solid var(--grey);padding-top:2mm}.summary-title,.record-title{color:var(--blue);font-size:20pt;font-weight:400;margin:8mm 0 5mm}.meta{font-size:9pt;margin-bottom:4mm}.summary-table,.record-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:8pt}.summary-table th,.summary-table td,.record-table th,.record-table td{border:1px solid #a0a5bb;padding:2.2mm;vertical-align:top}.summary-table th,.record-table th{background:var(--blue);color:white;font-weight:600}.summary-table .num{width:8mm;text-align:center}.summary-table .question-col{width:76mm}.summary-table .result-col{width:15mm;text-align:center}.correct{color:var(--green);font-weight:700}.wrong{color:var(--red);font-weight:700}.record-table{font-size:7.5pt}.record-table td{height:16mm}.record-table th:nth-child(1){width:18mm}.record-table th:nth-child(2){width:27mm}.record-table th:nth-child(4){width:28mm}.record-table th:nth-child(5){width:29mm}.record-table th:nth-child(6){width:47mm}.print-footer{position:absolute;bottom:9mm;left:16.5mm;font-size:7.5pt;color:var(--grey)}
@page{size:A4 portrait;margin:0}@media print{body{background:white}.shell{display:none!important}.print-pages{display:block}.print-page{margin:0;box-shadow:none}.summary-table,.record-table{-webkit-print-color-adjust:exact;print-color-adjust:exact}.print-line,.summary-table th,.record-table th,.result-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media(max-width:650px){.shell{margin:0}.top,main,.results{padding-left:18px;padding-right:18px}.candidate{grid-template-columns:1fr}.brand{font-size:26px}.actions{flex-direction:column}.btn{width:100%}}
</style>
</head>
<body>
<div class="shell" id="app">
 <div class="gradient"></div><header class="top"><div class="brand">ormazabal<small>velatia</small></div><div class="tag">Technical training assessment</div></header>
 <main id="quizArea">
  <section class="intro"><h1>BB Resistance & Insulation Resistance Training Quiz</h1><p>Answer all 14 questions. The pass mark is 11 correct answers out of 14 (stated as 80% in the source test). Enter your name before submitting.</p><div class="candidate"><label>Candidate full name<input id="candidateName" autocomplete="name" required></label><label>Date of test<input id="testDate" type="date" required></label></div></section>
  <div class="progress-wrap"><div class="progress"><span id="bar"></span></div><div class="progress-text" id="progressText">0 of 14 answered</div></div>
  <form id="quizForm"></form><div class="notice" id="notice"></div>
  <div class="actions"><button class="btn secondary" type="button" id="resetBtn">Reset</button><button class="btn primary" type="button" id="submitBtn">Submit quiz</button></div>
 </main>
 <section class="results" id="results"><div class="scorecard"><div class="score" id="scoreText"></div><div class="status" id="statusText"></div><p id="resultDetail"></p></div><div class="actions"><button class="btn secondary" id="retryBtn">Retake quiz</button><button class="btn primary" id="printBtn">Print certificate and summary</button></div></section>
 <div class="gradient"></div>
</div>
<div class="print-pages" id="printPages">
 <section class="print-page"><div class="print-logo">ormazabal<small>velatia</small></div><div class="cert"><div class="eyebrow">Certificate of completion</div><h1>BB Resistance &amp;<br>Insulation Resistance Training</h1><p>This certificate is awarded to</p><h2 id="certName"></h2><p class="course">for completing the training assessment.</p><div class="result-box"><strong id="certStatus"></strong><br><span id="certScore"></span></div><div class="sign"><div>Date of assessment<br><strong id="certDate"></strong></div><div>Trainer / authorised signature</div></div></div><div class="print-footer">BB and IR Training Test • Page 1 of 4</div><div class="print-line"></div></section>
 <section class="print-page"><div class="print-logo">ormazabal<small>velatia</small></div><h1 class="summary-title">Answer summary</h1><div class="meta" id="summaryMeta1"></div><table class="summary-table"><thead><tr><th class="num">No.</th><th class="question-col">Question</th><th>Your answer</th><th>Correct answer if incorrect</th><th class="result-col">Result</th></tr></thead><tbody id="summary1"></tbody></table><div class="print-footer">BB and IR Training Test • Page 2 of 4</div><div class="print-line"></div></section>
 <section class="print-page"><div class="print-logo">ormazabal<small>velatia</small></div><h1 class="summary-title">Answer summary continued</h1><div class="meta" id="summaryMeta2"></div><table class="summary-table"><thead><tr><th class="num">No.</th><th class="question-col">Question</th><th>Your answer</th><th>Correct answer if incorrect</th><th class="result-col">Result</th></tr></thead><tbody id="summary2"></tbody></table><div class="print-footer">BB and IR Training Test • Page 3 of 4</div><div class="print-line"></div></section>
 <section class="print-page"><div class="print-logo">ormazabal<small>velatia</small></div><h1 class="record-title">Record of IR and BB Testing Experience</h1><p class="meta">Candidate: <strong id="recordName"></strong></p><table class="record-table"><thead><tr><th>Date</th><th>SAP Contract No.</th><th>Contract Name</th><th>Type of equipment<br>CGM / CPG.0</th><th>IR / BB or both performed</th><th>Supervising Engineer and comments</th></tr></thead><tbody id="recordRows"></tbody></table><div class="print-footer">BB and IR Training Test • Page 4 of 4</div><div class="print-line"></div></section>
</div>
<script>
const questions=[
{q:'What is a Busbar?',o:['Device to test a bushing','Common conductor between individual switchboard panels','Internal device for clearing a high voltage current','Principle Transformer'],a:1},
{q:'A BB resistance test should?',o:['Result in low resistance values','Result in high resistance values','Be tested at 56 kV','Always be performed as part of secondary current injection testing'],a:0},
{q:'What piece of equipment do we use for BB resistance testing?',o:['Megohm meter','Multimeter','PF test set','Micro-ohm meter'],a:3},
{q:'What principle of measurement does the BB test meter use?',o:['2-wire high current','2-wire low current','4-wire high current','4-wire high voltage'],a:2},
{q:'What value of current does a typical BB portable test meter use for testing purposes?',o:['10 A','50 A','100 A','10 V'],a:0},
{q:'Why should we not use a steel bolt in a bushing for BB testing?',o:['Different metals can cause corrosion','It is not calibrated','It can affect the readings due to a higher resistance','They should be stainless steel only'],a:2},
{q:'What is a typical resistance value for a busbar resistance between two identical panels?',o:['300 milliohms','300 micro-ohms','300 megaohms','300 nano-ohms'],a:1},
{q:'What is a typical resistance value for a cubicle that is closed into Earth?',o:['300 milliohms','300 micro-ohms','300 megaohms','300 nano-ohms'],a:1},
{q:'What test current would you typically use on site following assembly of the busbar?',o:['10 V','10 A','100 V','100 A'],a:3},
{q:'When performing an IR test on the HV circuit, what test voltage do we use?',o:['1 kV','2 kV','5 kV','56 kV'],a:2},
{q:'What type of voltage does the portable battery IR test meter inject?',o:['AC','VLF','DC','VHF'],a:2},
{q:'What values would we expect to see as part of a healthy IR test?',o:['Very low ohms','Very high ohms','Values less than 10 A','Values greater than 10 A'],a:1},
{q:'When performing an IR test across a switchboard, if values were less than what value would we look to determine what might be the cause?',o:['1 TΩ','10 TΩ','10 GΩ','100 GΩ'],a:3},
{q:'What can affect the IR test and meter?',o:['SF6 gas pressure','Environmental conditions','AC supply voltage','CT turns ratio'],a:1}
];
const form=document.getElementById('quizForm'), bar=document.getElementById('bar'), progressText=document.getElementById('progressText');
questions.forEach((x,i)=>{const s=document.createElement('section');s.className='question';s.innerHTML=`<h2>${i+1}. ${x.q}</h2>`+x.o.map((v,j)=>`<label class="option"><input type="radio" name="q${i}" value="${j}"><span><strong>${String.fromCharCode(65+j)}.</strong> ${v}</span></label>`).join('');form.appendChild(s)});
document.getElementById('testDate').value=new Date().toISOString().slice(0,10);
form.addEventListener('change',updateProgress);function updateProgress(){const n=questions.filter((_,i)=>form.querySelector(`input[name=q${i}]:checked`)).length;bar.style.width=(n/questions.length*100)+'%';progressText.textContent=`${n} of ${questions.length} answered`}
function esc(s){return String(s).replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]))}
function resetAll(){form.reset();document.getElementById('candidateName').value='';document.getElementById('testDate').value=new Date().toISOString().slice(0,10);document.getElementById('results').style.display='none';document.getElementById('quizArea').style.display='block';document.getElementById('notice').style.display='none';updateProgress();scrollTo(0,0)}
document.getElementById('resetBtn').onclick=()=>{if(confirm('Clear the candidate details and all answers?'))resetAll()};document.getElementById('retryBtn').onclick=resetAll;
document.getElementById('submitBtn').onclick=()=>{const name=document.getElementById('candidateName').value.trim(),date=document.getElementById('testDate').value;const missing=questions.filter((_,i)=>!form.querySelector(`input[name=q${i}]:checked`)).length;const notice=document.getElementById('notice');if(!name||!date||missing){notice.textContent=`Please enter the candidate name and date, and answer all questions. ${missing?missing+' question(s) remain unanswered.':''}`;notice.style.display='block';notice.scrollIntoView({behavior:'smooth',block:'center'});return}notice.style.display='none';let score=0;const answers=[];questions.forEach((x,i)=>{const sel=+form.querySelector(`input[name=q${i}]:checked`).value;const ok=sel===x.a;if(ok)score++;answers.push({sel,ok})});const percent=Math.round(score/questions.length*100),passed=score>=11;document.getElementById('scoreText').textContent=`${score} / ${questions.length} (${percent}%)`;const st=document.getElementById('statusText');st.textContent=passed?'PASS':'FAIL';st.className='status '+(passed?'pass':'fail');document.getElementById('resultDetail').textContent=passed?'The candidate has achieved the required pass mark of 11 out of 14.':'The candidate has not achieved the required pass mark of 11 out of 14.';buildPrint(name,date,score,percent,passed,answers);document.getElementById('quizArea').style.display='none';document.getElementById('results').style.display='block';scrollTo(0,0)};
function rowHTML(x,i,r){return `<tr><td class="num">${i+1}</td><td>${esc(x.q)}</td><td>${esc(x.o[r.sel])}</td><td>${r.ok?'—':esc(x.o[x.a])}</td><td class="${r.ok?'correct':'wrong'}">${r.ok?'Correct':'Incorrect'}</td></tr>`}
function buildPrint(name,date,score,percent,passed,answers){const pretty=new Date(date+'T12:00:00').toLocaleDateString('en-GB',{day:'2-digit',month:'long',year:'numeric'});document.getElementById('certName').textContent=name;document.getElementById('certStatus').textContent=passed?'PASS':'FAIL';document.getElementById('certScore').textContent=`Score: ${score} out of ${questions.length} (${percent}%)`;document.getElementById('certDate').textContent=pretty;document.getElementById('recordName').textContent=name;const meta=`Candidate: ${esc(name)}    Date: ${pretty}    Score: ${score}/${questions.length} (${percent}%)    Result: ${passed?'PASS':'FAIL'}`;document.getElementById('summaryMeta1').innerHTML=meta;document.getElementById('summaryMeta2').innerHTML=meta;document.getElementById('summary1').innerHTML=questions.slice(0,7).map((x,j)=>rowHTML(x,j,answers[j])).join('');document.getElementById('summary2').innerHTML=questions.slice(7).map((x,j)=>rowHTML(x,j+7,answers[j+7])).join('');document.getElementById('recordRows').innerHTML=Array.from({length:11},()=>'<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>').join('')}
document.getElementById('printBtn').onclick=()=>window.print();
</script>
</body></html>